<template>
  <div class="wrap">
    <head-title :title="headText" @callback="onClickLeft"></head-title>
    <div class="wrapbd">
      <!--<div class="qrcode" id="qrcode1" ref="qrcode1"></div>-->
      <div class="qrcode"><img :src="url"/></div>
      <p>推荐用户用微信扫描二维码，分享给好友</p>
    </div>
    <tabbar :num ="num"></tabbar>
  </div>
</template>
<script>
  import tabbar from "./../../components/tabbar.vue";
  import HeadTitle from "./../../components/title.vue";
  // import QRCode from 'qrcodejs2'
  import { Tab, Tabs } from 'vant';
  export default {
    data(){
      return {
        headText:'分享二维码',
        num: 3,
        user_type: '',
        url: ''
      }
    },
    created(){
      this.qrcode();
    },
    methods:{
      //返回
      onClickLeft () { this.$router.push('/user');},
      qrcodeUrl(){
        let _this = this;
        let qrcode1 = new QRCode('qrcode1', {
          text: _this.url, // 二维码内容
        });

      },
      qrcode(){
        let _this = this;
        this.Tools.AXIOS({
          url:'user/share',
          success: function(res){
            _this.user_type = res.data.data.user_type;
            _this.url = res.data.data.url;
            // _this.qrcodeUrl();   //生成二维码
          },
          error(res){}
        })
      }
    },
    components: {
      tabbar,
      HeadTitle
    },
  }
</script>
<style scoped>
  .wrapbd{ background: #fff; padding-bottom: 1.5rem;height: 9rem;padding-top: 1rem;}
  .yj{ text-align: center; font-size: .4rem; margin: .5rem auto; display: block; color: red;}
  .qrcode{ width:50%; background: #ccc; margin: 0 auto 0; text-align: center; line-height: 0; font-size: .35rem;}
  .qrcode img{ width: 100%;}
  p{ text-align: center; margin-top: .5rem; font-size: .35rem;}
</style>
